<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>货柜修改</title>
  <base href="<%=basePath%>">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" type="text/css" href="style/easyui/easyui.css">
</head>
<body>
  <div class="layui-form" lay-filter="layuiadmin-depotrack-form-list" id="layuiadmin-depotrack-form-list" style="padding: 20px 30px 0 0;">
    <input type="hidden" name="id" id="id" value="${depotrack.depotrack.id}"/>
    <div class="layui-form-item">
      <label class="layui-form-label">货柜编号</label>
      <div class="layui-input-inline">
        <input type="text" name="depotrackcode" id="depotrackcode" lay-verify="required|length100" placeholder="请输入货柜编号" autocomplete="off" class="layui-input" value="${depotrack.depotrack.depotrackcode}">
      </div>
      <label class="layui-form-label">货柜名称</label>
      <div class="layui-input-inline">
        <input type="text" name="depotrackname" id="depotrackname" lay-verify="required|length100" placeholder="请输入货柜名称" autocomplete="off" class="layui-input" value="${depotrack.depotrack.depotrackname}">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">总层数</label>
      <div class="layui-input-inline">
        <input type="text" name="rownums" id="rownums"
               lay-verify="required|number|num20"
               placeholder="请输入总层数" onkeyup="value = value.replace(/[^0-9]/g,'')" autocomplete="off" class="layui-input" value="${depotrack.depotrack.rownums}">
      </div>
      <label class="layui-form-label">总列数</label>
      <div class="layui-input-inline">
        <input type="text" name="columnnums" id="columnnums"

               lay-verify="required|number|num20"
               placeholder="请输入总列数" onkeyup="value = value.replace(/[^0-9]/g,'')" autocomplete="off" class="layui-input" value="${depotrack.depotrack.columnnums}">
      </div>
      <button type="button" class="layui-btn" onclick="addDepotrack();">生成货柜模拟图</button>
    </div>
    
    <div class="layui-form-item">	
		<table width="400px;" id="depotrackTR" border="0" cellpadding="0" cellspacing="0" style="margin:auto"></table>
	</div>
    
    <div class="layui-form-item layui-hide">
      <input type="button" lay-submit lay-filter="layuiadmin-depotrack-form-submit" id="layuiadmin-depotrack-form-submit" value="确认添加">
      <input type="button" lay-submit lay-filter="layuiadmin-depotrack-form-edit" id="layuiadmin-depotrack-form-edit" value="确认编辑">
    </div>
  </div>

  <script src="layuiadmin/layui/layui.js"></script>  
  <script src="layuiadmin/js/common/jquery.js"></script>
  <script src="layuiadmin/js/common/jquery.easyui.min.js"></script>
  <script src="layuiadmin/js/form.js"></script>
  <script>
 	layui.config({
	    base: 'layuiadmin/' //静态资源所在路径
	  }).extend({
	    index: 'lib/index' //主入口模块
	  }).use(['index', 'form', 'laydate'], function(){
		  var $ = layui.$
		    ,admin = layui.admin
		    ,element = layui.element
		    ,layer = layui.layer
		    ,laydate = layui.laydate
		    ,form = layui.form;
	    
		laydate.render({
			elem: '#birthday', //弹出页的指定元素生日时期需要为时间格式
		});
		  
		if('${depotrack.depotrack.id}' != null &&  '${depotrack.depotrack.id}' != ""){
			addDepotrack();
		}


      form.verify({
        length100: function(value, item){
          if(value.length>100 ){
            return '文本长度不能超过100个字符';
          }
        },
        num20:function (value,item) {
          if(value<=0 || value>20){
            return '请设置1-20以内的整数';
          }
        }
      });


      //监听提交
	    form.on('submit(layuiadmin-depotrack-form-submit)', function(obj){
	      	var field = obj.field; //获取提交的字段
	      	var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引  
	
	        //先执行下生成模拟图
			addDepotrack();
	      	
			//防止重复提交
	      	layer.confirm('确定操作?', function(index){
      			layer.msg('正在提交请稍候。。。', {icon: 16,time:'-1',shade : [0.5 , '#000' , true]});
      			//发送请求
	      		admin.req({
	    		    url: 'depotrack/update' //实际使用请改成服务端真实接口
	    	        ,data: field
	    	        ,type: 'POST'
	    	        ,done: function(res){
	    	        	layer.msg(res.msg);
	    	        	//layer.close(loading);
	    	        }
	         	});
	      		 
	        });
	      	
	        //parent.layui.table.reload('LAY-depotrack-content-list'); //重载表格
	        //parent.layer.close(index); //再执行关闭 
	    });
	  })
	  
	  window.addDepotrack = function(obj) {
	    	 var depotrackcode = $('#depotrackcode').val();
	         var depotrackname = $('#depotrackname').val();
			 var rownums = $('#rownums').val();
	         var columnnums = $('#columnnums').val();
	         
	         
	         if(depotrackcode == ''){
				 $("#depotrackcode").focus();
				 layer.msg('请输入货柜编号', {offset: '10px',icon: 1,time: 2000});
				return;
			 }
	         
	         if(depotrackname == ''){
				 $("#depotrackname").focus();
				 layer.msg('请输入货柜编号', {offset: '10px',icon: 1,time: 2000});
				return;
			 }
	         
	         if(rownums == ''){
				 $("#rownums").focus();
				 layer.msg('请输入总层数', {offset: '10px',icon: 1,time: 2000});
				return;
			 }
	         
	         if(rownums<1 || rownums>20){
				 $("#rownums").focus();
				 layer.msg('总层数范围为1~20', {offset: '10px',icon: 1,time: 2000});
				return;
			 }
	         
	         if(columnnums == ''){
				 $("#columnnums").focus();
				 layer.msg('请输入总列数！', {offset: '10px',icon: 1,time: 2000});
				return;
			 }
	         
	         if(columnnums<1 || columnnums>20){
				 $("#columnnums").focus();
				 layer.msg('总列数范围为1~20', {offset: '10px',icon: 1,time: 2000});
				return;
			 }
	         
	         
			 var racknum = rownums * columnnums;
	         
	         var iCnt = 1;
	         var para1= 1;
	         var para2= 1;
	         var HTMLStr = '<input type="hidden" name="racknum" id="racknum" value= "' + racknum + '"/>';
	         
	         for(var i = rownums; i >= 1; i--){
					HTMLStr += "<tr>";
	             for (var j=1; j <= columnnums; j++) {
	            	 
	                 para1 = iCnt;
	                 para2 = depotrackcode + "-" + i + "-" + j; 
	                 
	                 var str = '<td align=center><input type="button" name="strId[#P2]" id="strId[#P2]" value="#P2"> <input type="hidden" name="strList[#P1]" id="strList[#P1]" value="#P2"></td>';
	                 str = str.replaceAll('#P1',para1,"g");
	                 str = str.replaceAll('#P2',para2,"g");
						
	                 HTMLStr += str;						
	                 iCnt++;	//#P1
	             }
	             HTMLStr += "</tr>";
	         }
	         
	         
	        $('#depotrackTR').html(HTMLStr).css("padding","10px 0");
			$('#depotrackTR td').css("padding","3px 0");
			var wh=300/columnnums;
			if(wh<30){
				wh=25
			}
			var ww = wh*2.3;
			$('#depotrackTR input').height(wh).width(ww).css("padding","0");
			resetH();
       };
	    
       String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {
           /* 
           string：字符串表达式包含要替代的子字符串。
           reallyDo：被搜索的子字符串。
           replaceWith：用于替换的子字符串。
           */
           if (!RegExp.prototype.isPrototypeOf(reallyDo)) {
               return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi": "g")), replaceWith);
           } else {
               return this.replace(reallyDo, replaceWith);
           }
       }
  </script>
</body>
</html>